<template>

  <nav class="navigation-bar">
    <div class="left">
      <router-link :to="{ path: '/' }">
      <el-tag size="default" type='primary' style="margin-right: 30px">
        首页
      </el-tag>
      </router-link>
      <router-link :to="{ path: '/course_main' }">
      <el-tag size="default" type='success' style="margin-right: 30px">
        课程
      </el-tag>
      </router-link>
<a href="https://gitee.com/fjl200484/study-station" target="_blank"><el-tag size="default" type='danger' style="margin-right: 30px">
  Gitee仓库
</el-tag></a>

      <a href="https://gitee.com/fjl200484/study-station" target="_blank"><el-tag size="default" type='info'>
        演示视频
      </el-tag></a>

    </div>
    <div class="navigation-wrapper">
      <ul class="nav-links">

        <router-link to="/index" class="nav-link">注册</router-link>
        <router-link to="/Login" class="nav-link">登录</router-link>
      </ul>
    </div>
  </nav>
</template>

<script>
import { ref, onUnmounted } from 'vue';
</script>

<style scoped>
.navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 73px;
  background-color: #ffffff;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 999;
}

.nav-links {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: #000000;
  font-weight: 500;
  line-height: 60px;
  padding: 0 1rem;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 14px;

  &:hover {
    color: #888888;
  }
}
.left
{
  text-align: left;
  width: 80%;
}
</style>
